<template>
  <div class="video-com">
    <div v-show="showDelete" class="list-item-delete  ">
      <span class="pull_left">{{ item.text }}</span>
      <span class="pull_right" @click.stop="deleteCurItem(item, index)"
        >删除</span
      >
    </div>
    <!-- 样式1 -->
    <div v-if="item.stylesType == 0">
      <!-- 样式1 未添加视频时 -->
      <div v-if="item.imgUrls[0].videoUrls == ''" class="styleOne">
        <div class="video_module">
          <video
            width="100%"
            height="200px"
            style="background:#EFEFEF"
            :poster="item.imgUrls[0].src"
          ></video>
        </div>
      </div>
      <!-- 样式1 添加商品时 -->
      <div v-else class="styleOne">
        <div class="video_module">
          <video
            width="100%"
            height="200px"
            controls="controls"
            controlsList="nodownload"
            :poster="item.imgUrls[0].src"
            :src="item.imgUrls[0].videoUrls"
          ></video>
        </div>
      </div>
    </div>
    <!-- 样式2 -->
    <!-- <div v-else></div> -->
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: -1
    },
    showDelete: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    deleteCurItem(e, i) {
      this.$emit("deleteCurItem", e, i);
    }
  }
};
</script>

<style lang="scss" scoped>
.video-com {
  position: relative;
  .styleOne {
    .video_module {
      width: 370px;
      height: 200px;
      background: #d8d8d8;
      text-align: center;
      line-height: 200px;
    }
  }
}
</style>
